<template>
  <view class="console-top-shop-info">
    <view class="shop-name-wrap">
      <text>{{ activeShop&&activeShop.shopName }}</text>
    </view>
    <view class="message-icon" @click="goto('message')">
      <text class="iconfont">&#xe653;</text>
      <view v-if="haveMessage" class="have-message"></view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import Select from "../../../../components/public/Select/index.vue";
export default {
  components: {
    Select
  },
  data() {
    return {
      // businessStatus: 1,
      options: [
        {
          label: "营业中",
          value: 0
        },
        {
          label: "休息中",
          value: 1
        }
      ]
    };
  },
  computed: {
    ...mapGetters({
      activeShop: "activeShop",
      messageNum: "messageNum"
    }),
    businessStatus() {
      return this.activeShop.businessStatus;
    },
    haveMessage() {
      return this.messageNum > 0 || false;
    }
  },
  methods: {
    ...mapMutations({ ADD_MESSAGE_NUM: "ADD_MESSAGE_NUM" }),
    handleStatusChange(item) {
      this.$emit("changeStatus", item);
    },
    goto(page) {
      if (page == "message") this.ADD_MESSAGE_NUM(-this.messageNum);
      this.$goto(page);
      // this.$play.speak("您有一条新的系统消息，请注意查看");
    }
  }
};
</script>

<style scoped lang="scss">
$height: 60rpx;
.console-top-shop-info {
  height: $height;
  line-height: $height;
  display: flex;
  justify-content: center;
  position: relative;
  .shop-name-wrap {
    color: #ffffff;
    font-size: 36rpx;
    font-weight: 600;
    margin-right: 20rpx;
  }
  .message-icon {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 35rpx;
    color: #ffffff;
    .have-message {
      height: 20rpx;
      width: 20rpx;
      border-radius: 20rpx;
      background-color: red;
      position: absolute;
      top: 12rpx;
      right: -4rpx;
    }
  }
  .business-status {
    display: flex;
    align-items: center;
  }
}
</style>
